<template>
<div class="container">
    <div class="page-head">
        <div class="left">
            <el-form :inline="true" :model="query" @submit.native.prevent>
                <el-form-item>
                    <el-button type="danger" @click="showCreateView"><i class="el-icon-plus" style="margin-right: 5px"></i>添加</el-button>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="query.keyword" placeholder="规格名称" clearable></el-input>
                </el-form-item>
                <el-button type="primary" native-type="submit" @click="doSearch">搜索</el-button>
            </el-form>
        </div>
    </div>
    
    <el-table ref="tableView" height="tableHeight" class="page-body" :data="tableData" border>
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="ID" prop="id" width="80" align="center"></el-table-column>
        <el-table-column label="规格名称" prop="rule_name"></el-table-column>
        <el-table-column label="商品规格" prop="spec_fields"></el-table-column>
        <el-table-column label="商品属性">
            <template slot-scope="scope">
                <div class="values">
                    <div class="value-item" v-for="(item,index) in scope.row.spec_values" :key="index">{{item.join(',')}}</div>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="showEditView(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="deleteRow(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="page-foot">
        <div class="left"></div>
        <div class="right">
            <common-pagination :total="pg.total" :page.sync="pg.page" :limit.sync="pg.limit" @getList="getTableData"></common-pagination>
        </div>
    </div>

    <edit-view ref="editAttrView" @getList="getTableData"></edit-view>
</div>
</template>

<script>
import pagination from "@/components/mixins/pagination.vue";
import editView from "./edit.vue";

import { getGoodsRuleListApi, deleteGoodsAttrApi } from "@/api/product/rule";

export default {
    components: {
        editView,
    },
    mixins: [pagination],
    data() {
        return {
            loading: false,
            query: {
                keyword: '',
            },
            tableData: []
        }
    },
    created() {
        this.getTableData();
    },
    methods: {
        getTableData() {
            let params = Object.assign({}, this.query);
            params["pagination"] = this.pagination;
            this.loading = true;

            getGoodsRuleListApi(params).then(res => {
                this.loading = false;
                this.tableData = res.data.list;
                this.setPg(res);
            })
        },
        doSearch(){
            this.resetPg();
            this.getTableData();
        },
        // 创建
        showCreateView() {
            this.$refs['editAttrView'].showCreateDrawer();
        },
        // 编辑
        showEditView(row) {
            this.$refs['editAttrView'].getIofo(row)
        },
        // 删除
        deleteRow(id) {

            deleteGoodsAttrApi({
                id: id
            }).then(res => {

            })
        }
    }
}
</script>
